<template>
    <MainSlot v-loading="loading">
        <template v-slot:table>
            <div class="content">
                <div class="searchList">
                    <el-form ref="form" :model="formData" label-width="80px">
                        <div class="elFormItemList">
                            <el-form-item class="elItem" label="选择日期">
                                <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" clearable v-model="formData.timeList"
                                    type="datetimerange" :picker-options="pickerOptions" range-separator="至"
                                    start-placeholder="开始日期" end-placeholder="结束日期" align="right"
                                    @change="queryFeedRatio">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item class="elItem" label="选择批次">
                                <el-select clearable filterable multiple v-model="formData.batchIdList" class="w100p"
                                    placeholder="请选择批次" @change="queryFeedRatio">
                                    <el-option v-for="(item, index) in batchList" :key="index" :value="item.batchId"
                                        :label="item.batchName" />
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-form>
                </div>
                <div class="error">
                    <div class="errorBtn">
                        <div class="btn" @click="openErrorBox = !openErrorBox">?</div>
                    </div>
                    <div class="errorBox" v-show="openErrorBox">
                        <p>注：计算公式如下</p>
                        <p>FCR=饲料总重/增重量，饲料转化率越低，说明饲料利用率越高。</p>
                        <p>FE=（育成鱼或产物重量-初始鱼苗或投放量）/饲料总量。查询结果：饲料有100%的部分被有效利用于生长。</p>
                        <p>PER=饲料总量/产物总量。查询结果：每产出XXXKG鱼需要投喂XXXKG的饲料</p>
                    </div>
                </div>
                <div class="breedingFeedRatio">
                    <div class="breedingFeedRatioInfo" v-for="item, index in breedingFeedRatio" :key="index">
                        <div class="ratio">
                            <div class="title">饲料转化率（FCR）</div>
                            <div class="info">
                                <div class="item">
                                    <span class="label">批次名称：{{ item.batchName }}</span>
                                    <span class="label">批次投塘重量：{{ item.inputWeight }}斤</span>
                                    <span class="label">投喂饲料总重：{{ item.feedWeight }}斤</span>
                                    <span class="label">批次产出总重量：{{ item.produceWeight }}斤</span>
                                    <span class="label">批次总增重：{{ item.addWeight }}斤</span>
                                </div>
                            </div>
                            <div class="percentage"><span class="label">当前饲料转化率：{{ setRatio(item.fcrRatio || 0)
                                    }}</span>
                            </div>
                        </div>
                        <div class="ratio">
                            <div class="title">饲料利用率（FE）</div>
                            <div class="info">
                                <div class="item">
                                    <span class="label">批次名称：{{ item.batchName }}</span>
                                    <span class="label">批次投塘重量：{{ item.inputWeight }}斤</span>
                                    <span class="label">投喂饲料总重：{{ item.feedWeight }}斤</span>
                                    <span class="label">批次产出总重量：{{ item.produceWeight }}斤</span>
                                </div>
                            </div>
                            <div class="percentage"><span class="label">饲料利用率：{{ setRatio(item.feRatio || 0) }}</span>
                            </div>
                        </div>
                        <div class="ratio">
                            <div class="title">饲料效益（PER）</div>
                            <div class="info">
                                <div class="item">
                                    <span class="label">批次名称：{{ item.batchName }}</span>
                                    <span class="label">投喂饲料总重：{{ item.feedWeight }}斤</span>
                                    <span class="label">批次产出总重量：{{ item.produceWeight }}斤</span>
                                </div>
                            </div>
                            <div class="percentage"><span class="label">饲料效益：{{ setRatio(item.perRatio || 0) }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </template>
    </MainSlot>
</template>

<script>
import MainSlot from "@/components/MainSlot";
import batch from '@/api/batch/batchManagement';

export default {
    components: { MainSlot },
    data() {
        return {
            openErrorBox: false,
            loading: false,
            batchList: [],
            breedingFeedRatio: [],
            formData: {
                timeList: [],
                batchIdList: []
            },
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
        }
    },
    computed: {},
    mounted() {
        this.initData();
        this.queryFeedRatio();
    },
    methods: {
        async initData() {
            // 获取批次列表 
            let { data: batchList } = await batch.queryByCondition({ batchType: 'BREEDING' })
            this.batchList = batchList.filter(e => {
                return e.status == 'COMPLETED'
            })
        },
        async queryFeedRatio() {
            let { timeList, batchIdList } = this.formData;
            timeList = timeList || []
            let endTime = timeList[1] || ''
            let startTime = timeList[0] || ''
            this.breedingFeedRatio = [];
            let { data } = await batch.queryFeedRatio({
                batchIdList,
                endTime,
                startTime
            });
            this.breedingFeedRatio = data || []
        },
        setRatio(num) {
            return (num * 100.00) + '%'
        }
    }
};
</script>

<style lang="scss" scoped>
::v-deep .module,
::v-deep .tableSlot {
    height: 100% !important;

    .content {
        width: 100%;
        height: 100%;
    }
}

.searchList {
    .elFormItemList {
        display: flex;
        justify-content: flex-start;

        .elItem {
            width: 500px;
        }
    }
}

.breedingFeedRatio {
    height: calc(100% - 200px);
    overflow: auto;

    .breedingFeedRatioInfo {
        margin-bottom: 15px;
        padding: 15px;
        background-color: #f3f3f3;
        position: relative;

        &::after {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 8px;
            background-image: repeating-linear-gradient(to right, transparent, transparent 8px, #fff 8px, #fff 10px), -webkit-gradient(linear, left top, right top, color-stop(50%, #207799), color-stop(50%, #6bc6f0));
            background-image: repeating-linear-gradient(to right, transparent, transparent 8px, #fff 8px, #fff 10px), linear-gradient(to right, #207799 50%, #6bc6f0 50%);
        }

        .ratio {
            background-color: #ffffff;
            margin-bottom: 10px;
            box-shadow: 0px 0px 6px 1px rgba(0, 107, 211, 0.16);

            &:last-child {
                margin-bottom: 0;
            }

            .title {
                background-color: #D6EBFE;
                padding: 10px;
            }

            .info {
                padding: 20px 0;

                .label {
                    display: inline-block;
                    padding: 0 20px;
                    border-right: 1px solid #cecece;

                    &:last-child {
                        border: none;
                    }
                }
            }

            .percentage {
                font-size: 20px;
                line-height: 40px;
                font-weight: bold;
                padding: 0 20px;
                color: #666666;
            }
        }
    }
}

.error {
    width: 100%;
    margin-bottom: 10px;
    color: red;

    .errorBtn {
        display: flex;
        justify-content: flex-end;
        width: 100%;

        .btn {
            color: #ffffff;
            width: 27px;
            height: 27px;
            background: linear-gradient(90deg, #7BCCFF 0%, #277CC4 100%);
            border-radius: 50%;
            text-align: center;
            line-height: 27px;
            cursor: pointer;
        }
    }
}
</style>